✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Simple And Best DropDown Menu With Pure CSS And HTML

Last Updated : Jul 1, 2023

IN - CSS HTML | Written & Updated By - Amruta

In this tutorial we will teach you how to make a simple and best dropdown menu using CSS and HTML. You can also make dropdown from jquery and java script.

Simple And Best DropDown Menu With Pure CSS And HTML

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Make Simple and Best DropDown Menu it takes only two steps:-

  1. Make a HTML file and define markups
  2. Make a CSS file and define styling for markups

Step 1. Make a HTML file and define markups

We make a HTML file and save it with a name menu.html 

<html>
   <head>
     <link rel="stylesheet" type="text/css" href="menu_style.css">
   </head>
   
   <body>

     <center>     
     <ul>

        <li id="link1" class="mainlink"><a href="#" class="main_anchor">Link1
           <ol class="link1_sublink">
              
              <li><a href="#">Sublink1</a></li>
              <li><a href="#">Sublink2</a></li>
              <li><a href="#">Sublink3</a></li>
           
           </ol>
        </li>
        <li class="mainlink"><a href="#" class="main_anchor">Link2</a></li>
        <li class="mainlink"><a href="#" class="main_anchor">Link3</a></li>
        <li class="mainlink"><a href="#" class="main_anchor">Link4</a></li>
        <li class="mainlink"><a href="#" class="main_anchor">Link5</a></li>

     </ul>
     </center>     


   </body>
</html>

Step 2. Make a CSS file and define styling for markups

Now we define different stylings for dropdown menu and save the file named menu_style.css 


ul,ol
{
   margin:0px;
   padding:0px;
   margin-top:180px;
   box-shadow:inset 0px 0px 10px 0px grey;
   text-align:center;
   font-size:24px;
   font-family:helvetica;
   width:150px;
}

li
{
   list-style-type:none;
   height:40px;
   line-height:40px;
   border:1px solid silver;
   border-left:none;
   border-right:none;
}

li:hover
{
   background-color:#819FF7;
   box-shadow:inset 0px 0px 10px 0px #5882FA;
   border:1px solid #5882FA;
   border-left:none;
   border-right:none;
}

li:hover .main_anchor
{
   color:white;
}

li a
{
   display:block;
   color:grey;
   text-decoration:none;
}

.link1_sublink
{
   visibility:hidden;
   display:none;
}

#link1:hover .link1_sublink 
{
   top:0px;
   left:585px;
   position:absolute;
   visibility:visible;
   display:block;
}

.link1_sublink li:hover a
{
   color:white;
}

That's all, this is how to make simple and best dropdown menu using pure CSS and HTML. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on dropdown menu CSS helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →